<template>
  <div class="test">
    <canvas width="400" height="400" ref="cvsRef"></canvas>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { mapNumToAngle } from "../utils/mapNumToAngle";
export default defineComponent({
  name: "test",
  setup() {
    const cvsRef = ref<HTMLCanvasElement>();
    onMounted(() => {
      const ctx = cvsRef.value?.getContext("2d");
      if (ctx) {
        //  arc(x, y, r, startAngle, endAngle, anticlockwise):
        // 以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。
        // anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)
        // ctx.beginPath();
        // ctx.arc(200, 200, 100, mapNumToAngle(0), mapNumToAngle(90));
        // ctx.fill();

        // ctx.beginPath();
        // ctx.arc(100, 20, 50, mapNumToAngle(0), mapNumToAngle(90));
        // ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(50, 50);
        //参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
        ctx.arcTo(200, 50, 200, 200, 100);
        // ctx.lineTo(200, 200);
        ctx.stroke();

        // ctx.beginPath();
        // ctx.rect(50, 50, 10, 10);
        // ctx.rect(200, 50, 10, 10);
        // ctx.rect(200, 200, 10, 10);
        // ctx.fill();
      }
    });
    return { cvsRef };
  },
});
</script>
<style scoped>
.test {
  width: 100%;
  height: 100%;
  background-color: #eee;
}
canvas {
  border: 1px solid red;
}
</style>
